<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>产品溯源</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
  
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f8f8;
            color: #333;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
            color: white;
            padding: 1.5rem 1rem 1rem;
            position: relative;
        }
        
        .header-title {
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
            margin-bottom: 0.5rem;
        }
        
        .header-logo {
            font-size: 0.9rem;
            text-align: center;
            opacity: 0.9;
        }
        
        .close-btn {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }
        
        /* 导航栏样式 */
        .nav-tabs {
            background-color: white;
            display: flex;
            justify-content: space-around;
            padding: 0.5rem 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .nav-item {
            text-align: center;
            color: #666;
            font-size: 0.9rem;
            padding: 0.5rem 0;
            position: relative;
        }
        
        .nav-item.active {
            color: #4CAF50;
            font-weight: 600;
        }
        
        .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1.5rem;
            height: 3px;
            background-color: #4CAF50;
            border-radius: 3px;
        }
        
        /* 溯源码信息卡片 */
        .code-card {
            background-color: white;
            margin: 1rem;
            padding: 1rem;
            border-radius: 0.8rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .code-number {
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: #333;
        }
        
        .verify-status {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #4CAF50;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        /* 产品信息样式 */
        .product-info {
            text-align: center;
            padding: 1.5rem 1rem;
        }
        
        .product-image {
            width: 12rem;
            height: 12rem;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 1rem;
            border: 4px solid white;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }
        
        .product-name {
            font-size: 1.4rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.8rem;
        }
        
        .organic-badge {
            display: inline-block;background-color: #4CAF50;color: white;
            padding: 0.3rem 1rem;border-radius: 1rem;font-size: 0.8rem;margin-bottom: 1rem;
        }
        
        .harvest-time {
            color: #4CAF50;
            font-size: 1rem;
        }
        
        /* 认证信息样式 */
        .certificate-section {
            margin: 1rem;
            padding: 1rem;
            background-color: white;
            border-radius: 0.8rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .traceable-badge {
            font-size: 0.8rem;
            color: #4CAF50;
            display: flex;
            align-items: center;
        }
        
        .certificate-content {
            background-color: #f9f9f9;
            border-radius: 0.5rem;
            padding: 1rem;
            position: relative;
            overflow: hidden;
        }
        
        .certificate-border {
            border: 2px solid #4CAF50;
            border-radius: 0.5rem;
            padding: 1rem;
            position: relative;
        }
        
        .certificate-border::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #4CAF50;
            color: white;
            padding: 0.2rem 1rem;
            font-size: 0.8rem;
            border-radius: 1rem;
        }
        
        .certificate-image {
            width: 100%;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .certificate-details {
            text-align: center;
        }
        
        .certificate-name {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }
        
        .certificate-info {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 0.3rem;
        }
        
        .certificate-stamp {
            position: absolute;
            right: 1rem;
            bottom: 1rem;
            width: 4rem;
            height: 4rem;
            opacity: 0.2;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 头部 -->
        <div class="header">
            <div class="close-btn">×</div>
            <div class="header-title">好食材从透明源头开始</div>
            <div class="header-logo">show.snkoudai.com</div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-tabs">
            <div class="nav-item active font">
                权威检测
                <!-- <img src="../../../admin/images/show.png" alt="可追溯" style="width: 16px; height: 16px; margin-left: 4px;" /> -->
            </div>
            <div class="nav-item">
                产地信息
                <!-- <img src="../../../admin/images/show.png" alt="可追溯" style="width: 16px; height: 16px; margin-left: 4px;" /> -->
            </div>
            <div class="nav-item">
                种植环节
                <!-- <img src="../../../admin/images/show.png" alt="可追溯" style="width: 16px; height: 16px; margin-left: 4px;" /> -->
            </div>
            <div class="nav-item">
                生产企业
                <!-- <img src="../../../admin/images/show.png" alt="可追溯" style="width: 16px; height: 16px; margin-left: 4px;" /> -->
            </div>
        </div>
        
        <!-- 溯源码信息卡片 -->
        <div class="code-card">
            <div class="code-number">您查询的溯源码编号为: 34380000012</div>
            <div class="verify-status">
                <!-- <img src="../../../admin/images/show.png" alt="已验证" style="width: 16px; height: 16px; margin-right: 4px;" /> -->
                核验通过
            </div>
        </div>
        
        <!-- 产品信息 -->
        <div class="product-info">
            <img class="product-image" src="../../../admin/images/act.jpg" alt="茶叶" />
            <div class="product-name">茶叶</div>
            <div class="organic-badge">
                <!-- <img src="../../../admin/images/show.png" alt="有机产品" style="width: 14px; height: 14px; margin-right: 4px;" /> -->
                有机产品
            </div>
            <div class="harvest-time">采收时间: 2025.04.25</div>
        </div>
        
        <!-- 认证信息 -->
        <div class="certificate-section">
            <div class="section-title">
                权威检测
                <div class="traceable-badge">
                    <!-- <img src="../../../admin/images/show.png" alt="可追溯" style="width: 16px; height: 16px; margin-right: 4px;" /> -->
                    可追溯
                </div>
            </div>
            <div class="certificate-content">
                <div class="certificate-border">
                    <img class="certificate-image" src="../../../admin/images/document.jpg" alt="有机产品认证证书" />
                    <div class="certificate-details">
                        <div class="certificate-name">有机产品认证证书</div>
                        <div class="certificate-info">证书编号: 09OP2400020</div>
                        <div class="certificate-info">有效期起: 2024.08.12</div>
                        <div class="certificate-info">有效期止: 2025.08.11</div>
                    </div>
                    <img class="certificate-stamp" src="../../../admin/images/show.png" alt="盖章" />
                </div>
            </div>
        </div>
    </div>
    <!-- <div id="app" v-cloak>
        <el-row :gutter="10">
  <el-col :xs="0" :span="4"><div class="grid-content bg-purple">111</div></el-col>
  <el-col :xs="24" :span="21"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
        首页
    </div> -->
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <!-- <script type="text/javascript" src="js/index.js"></script> -->
</body>

</html>